<template>
	<view>
		<!-- <view style="height: 20rpx; background-color: #FFFFFF;"></view> -->
		<!-- <uni-nav-bar style="padding-top: 20rpx;background-color: #FFFFFF;" @clickLeft="goBack()" left-icon="back" :title="navText" :border="false" fixed="true"></uni-nav-bar> -->
		
		<view class="main">
				<view class="Title bold">{{navText}}</view>
				<view class=" " v-if="navText=='退货'">
					<view v-if="goodsList.goods_list" >
						<view  class="InfoBox FlexBox" v-for="(item,index) in goodsList.goods_list" :key="index">
							<view class="ImgBox"><image :src="item.image_240_url" mode=""></image></view>
							<view class="Info">
								<view class="FlexBox Name">
									<view class="describe bold">{{item.goods_name}}</view>
									<view class="Price Colobf bold" >￥{{item.goods_price}}</view>
								<!-- goods_pay_price -->
								</view>
								<view class="FlexBox Model">
									<view class="size">{{item.goods_spec}}</view>
									<view class="Num">×{{item.goods_num}}</view>
								</view> 
							</view>
						</view>
					</view>
					<view v-else class="InfoBox FlexBox">
						<view class="ImgBox"><image :src="goodsList.image_240_url" mode=""></image></view>
						<view class="Info">
							<view class="FlexBox Name">
								<view class="describe bold">{{goodsList.goods_name}}</view>
								<view class="Price Colobf bold" >￥{{goodsList.goods_price}}</view>
							<!-- goods_pay_price -->
							</view>
							<view class="FlexBox Model">
								<view class="size">{{goodsList.goods_spec}}</view>
								<view class="Num">×{{goodsList.goods_num}}</view>
							</view> 
						</view>
					</view>
				</view>
				<view v-else-if="navText=='退款'" class="FlexBox InfoBox" v-for="(item,index) in goodsList.extend_order_goods" :key="index">
					<view class="ImgBox"><image :src="item.goods_image" mode=""></image></view>
					<view class="Info">
						<view class="FlexBox Name">
							<view class="describe bold">{{item.goods_name}}</view>
							<view class="Price Colobf bold" >￥{{item.goods_price}}</view>
						<!-- goods_pay_price -->
						</view>
						<view class="FlexBox Model">
							<view class="size">{{item.goods_spec}}</view>
							<view class="Num">×{{item.goods_num}}</view>
						</view> 
					</view>
				</view>
				<view class="FlexBox InfoBox" v-else-if="navText=='换货'">
					<view class="ImgBox"><image :src="goodsList.image_240_url" mode=""></image></view>
					<view class="Info">
						<view class="FlexBox Name">
							<view class="describe bold">{{goodsList.goods_name}}</view>
							<view class="Price Colobf bold" >￥{{goodsList.goods_price}}</view>
						<!-- goods_pay_price -->
						</view>
						<view class="FlexBox Model">
							<view class="size">{{goodsList.goods_spec}}</view>
							<view class="Num">×{{goodsList.goods_num}}</view>
						</view> 
					</view>
				</view>
				
				
				
				
			
				<view  class="FlexBox Reason" @click="Reason()">
					<view class="bold">
						{{navText}}{{navText=="退款"?"说明":"原因"}}
					</view>
					<view class="Choice">
						{{value}} <image src="../../static/images/right_arrow.png" mode=""></image>
					</view>
				</view>
				<view class="descri" v-if="navText!='退款'">
					<view class="bold">
						{{navText}}描述:
					</view>
					<textarea v-model="buyer_message"  style="border: 1rpx solid #EEEEEE; width: 100%;"/>
					<!-- <input class="inpit" v-model="buyer_message" type="text" placeholder="选填" /> -->
				</view>
				<view class="upload" >
					<view class="">
						上传凭证 <text class="Colo999">（上传图片）</text>
					</view>
					<view class="">					
						<image v-for="(itme,index) in imageList" :key="index" :src="itme" mode=""></image>
						<image v-if="imageList.length<3" src="../../static/images/tpscIng_03.png" mode="" @click="upload()"></image>
					</view>
				</view>
		</view>
	
		
		<view @click="tijiao()" class="Submission">
			提交
		</view>
		
		<!-- 选择原因弹框 -->
		<view class="shadow" v-if="Reasonframe">
			<view class="ReasonList">
				<view class="Close" @click="Close()">×</view>
				<view class="Title">退换原因</view>
				<view class="List">
					<view v-for="(itme,index) in ReasonList" :key="index" @click="radio(itme.reason_id,itme.reason_info)" 
					:class="{curr:num==itme.reason_id}">{{itme.reason_info}}</view>
				</view>
				<view class="Determine" @click="Determine()">
					确定
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
	const requImg = require("@/common/api_sign/requImg.js")
	export default {
		components:{uniNavBar},
		data() {
			return {
				navText:'退款',
				Reasonframe:false,
				ReasonList:[],
				num:0,
				imageList:[],
				imageList2:[],
				value:"请选择",
				order_id:0,
				type:0,
				goodsList:[],
				goods_id:0,
				buyer_message:'',
				Imgdata:"",
				dot:0,
				isDisable:false,
			}
		},
		onLoad(e) {
			console.log(e)
			this.order_id=e.order_id
			this.dot=e.index
			if(e.goods_id&&e.state==0){
				uni.setNavigationBarTitle({
				    title:"退货"
				});
				this.navText='退货'
				this.goods_id=e.goods_id
				this.getHu()
			}else if(e.state==1){
				uni.setNavigationBarTitle({
				    title:"换货"
				});
				this.navText='换货'
				this.goods_id=e.goods_id
				this.getExchangeInfo();
			}else{
				uni.setNavigationBarTitle({
				    title:"退款"
				});
				this.navText='退款'
				this.getInfo()
				// this.getGoodsInfo()
			}
		},
		methods: {
			getExchangeInfo(){
				this.$util.request({
					url:'/mobile/index.php?act=member_exchange&op=add_exchange',
					method:'POST',
					data:{
						order_id:this.order_id,
						goods_id:this.goods_id
					}
				}).then(res=>{
					console.log(res)
					this.ReasonList=res.datas.reason_list
					this.goodsList=res.datas.goods
				})
			},
			
			//获取退款订单信息
			getGoodsInfo(){
				this.$util.request({
					url:'/mobile/index.php?act=member_order&op=show_order',
					data:{
						order_id:this.order_id
					}
				}).then(res=>{
					console.log(res)
					if(res.error_code==0){
						this.goodsList=res.datas.order_info
					}else{
						uni.showToast({
							title:res.message,
							icon:"none",
							success() {
								uni.navigateBack({
									delta:1
								})
							}
						})
					}
				})
			},
			//获取退款订单
			getHu(){
				this.$util.request({
					url:'/mobile/index.php?act=member_refund&op=add_refund',
					method:'get',
					data:{
						order_id:this.order_id,
						rec_id:this.goods_id
					}
				}).then(res=>{
					console.log(res)
					if(res.error_code==0){
						this.ReasonList=res.datas.reason_list
						this.goodsList=res.datas.goods
					}else{
						uni.showToast({
							title:res.message,
							icon:"none",
							success() {
								uni.navigateBack({
									delta:1
								})
							}
						})
					}
					
					
					
				})
			},
			//获取退款信息
			getInfo(){
				this.$util.request({
					url:'/mobile/index.php?act=member_refund&op=add_refund_all',
					method:'POST',
					data:{
						order_id:this.order_id
					}
				}).then(res=>{
					this.ReasonList=res.datas.reason_list
				})
			},
			tijiao(){
				if(this.isDisable){
					return false
				}
				if(this.num==0){
					uni.showToast({
						title:'请选择退款原因！',
						icon:'none'
					})
					return false
				}
				this.isDisable=true
				uni.showLoading({})
				if(this.navText=='退款'){
					console.log(Array.isArray(this.imageList))
					this.$util.request({
						url:"/mobile/index.php?act=member_refund&op=save_refund_all",
						method:'POST',
						data:{
							order_id:this.order_id,
							buyer_message:this.value,
							pic_info:this.imageList2
						}
					}).then(res=>{
						if(res.error_code==0){
							uni.showToast({
								title:'提交成功'
							})
							setTimeout(()=>{
								uni.redirectTo({
									url:'/member/order/AllOrder'
								})
								this.isDisable=false;
							},1000)
						}else if(res.message.indexOf("接口签名验证失败")!=-1){
						uni.showToast({
							title:"非法字符",
							icon:"none"
						})	
					}else{
							uni.showToast({
								title:res.message,
								icon:'none'
							})
							this.isDisable=false;
						}
					})
				}else if(this.navText=='退货'){
					if(this.num==0){
						uni.showToast({
							title:'请填写退货原因！',
							icon:'none'
						})
					}else{
						
						this.$util.request({
							url:'/mobile/index.php?act=member_refund&op=save_refund',
							method:'POST',
							data:{
								order_id:this.order_id,
								goods_id:this.goods_id,
								refund_amount:this.goodsList.goods_pay_price,
								goods_num:this.goodsList.goods_num,
								reason_id:this.num,
								refund_type:2,
								buyer_message:this.buyer_message,
								pic_info:this.imageList2
							}
						}).then(res=>{
							if(res.error_code==0){
								uni.showToast({
									title:'提交成功！',
									success() {
										setTimeout(()=>{
											uni.redirectTo({
												url:'/member/order/AllOrder'
											})
											this.isDisable=false;
										},1000)	
									}
								})
								
							}else if(res.message.indexOf("接口签名验证失败")!=-1){
						uni.showToast({
							title:"存在非法字符",
							icon:"none"
						})	
					}else{
								uni.showToast({
									title:res.message,
									icon:'none'
								})
								this.isDisable=false;
							}
						})	
					}
				}else if(this.navText=='换货'){
					if(this.num==0){
						uni.showToast({
							title:'请填写退货原因！',
							icon:'none'
						})
					}else{
					this.$util.request({
						url:'/mobile/index.php?act=member_exchange&op=save_exchange',
						method:'POST',
						data:{
							order_id:this.order_id,
							goods_id:this.goods_id,
							reason_id:this.num,
							goods_num:this.goodsList.goods_num,
							refund_type:2,
							// pic_info:this.goodsList.goods_pay_price,
							buyer_message:this.buyer_message,
							pic_info:this.imageList2
						}
					}).then(res=>{
						if(res.error_code==0){
							uni.showToast({
								title:'提交成功！',
								success() {
									setTimeout(()=>{
										uni.redirectTo({
											url:'/member/order/AllOrder'
										})
										this.isDisable=false;
									},1000)	
								}
							})
							
						}else if(res.message.indexOf("接口签名验证失败")!=-1){
						uni.showToast({
							title:"存在非法字符",
							icon:"none"
						})	
					}else{
							uni.showToast({
								title:res,
								icon:'none',
								duration:100000
							})
							this.isDisable=false;
						}
					})	
					}	
				}
			},
			Reason(){
				this.Reasonframe=true;
			},
			goBack(){
				uni.navigateBack()
			},
			Close(){
				this.Reasonframe=false;
			},
			radio(id,name){
				this.num=id;
				this.value=name
				console.log(id,this.num)
			},
			upload(){
				let that = this;
				that.Imgdata="";
				if(that.imageList.length<3){
						uni.chooseImage({
						 count:1,
						 sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
						 sourceType: ['album','camera'], //从相册选择
						 success: function (res) {
								const tempFilePaths = res.tempFilePaths;
								let  data = requImg.request("index.php?act=upload&op=uploadFile&buss_type="+that.$uploadType.uploadtype008);
								 var uper = uni.uploadFile({
								  url:that.$apiurl+"index.php?act=upload&op=uploadFile",
								  filePath:res.tempFilePaths[0],
								  name: 'file',
								  formData: {
								    key:data.key,
									buss_type:data.buss_type,
									api_sign:data.api_sign,
									comefrom:data.comefrom,
									api_time:data.api_time,
									// api_member_id:data.api_member_id,
									// api_member_name:data.api_member_name,
								 },
								  success(res1) {
									  console.log(res1)
									  if(res1.statusCode==200){
										  let ImgInfo=JSON.parse(res1.data)
										  if(ImgInfo.error_code==0){
										  	that.imageList.push(ImgInfo.datas.file_url)
										  	that.imageList2.push(ImgInfo.datas.file_name)
										  }else{
										  	uni.showToast({
											  icon:"none",
											  title:ImgInfo.message
										  	})
										  }
										  // that.Imgdata=ImgInfo.datas;
									  }else{
										  uni.showToast({
											  icon:"none",
											  title:"图片上传失败"
										  })
									  }
								  },
								})
								
									
							
							
						 },
						 error : function(e){
							console.log(e);
						 }
						});
				}else{
					uni.showToast({
						icon:"none",
						title:"最多上传三张图片"
					})
				}
				 
			},
			Determine(){
				this.Reasonframe=false;
			}
			
			

		}
	}
</script>

<style>
	.inpit{
		height: 80rpx;
		font-size: 28rpx !important;
	}
	.bold{
		font-weight: bold;
	}
	.Layout {
		margin: 0 15rpx;
		box-sizing: border-box;
	}
	.FlexBox {
		display: flex;
		justify-content: space-between;
		/* align-items: center; */
		flex-wrap: wrap;
	}
	.Colobf{
		color: #ff4300;
	}
	.main{
		color: #333333;
		/* background-color: #FFFFFF; */
	}
	.main>view{
		padding: 15rpx 35rpx;
		background-color: #FFFFFF;
	}
	.Title{
		border-bottom: 1px solid #EEEEEE;
		font-size: 28rpx;
	}

	.InfoBox .ImgBox image{
		width: 160rpx;
		height: 160rpx;
	}
	.InfoBox .Info{
		width: 500rpx;
	}

	.InfoBox .Info .describe{
		width: 360rpx;
		font-size: 28rpx;
		display: -webkit-box; 
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	.InfoBox .Model{
		color: #999;
	}
	.Reason{
		margin-top: 10rpx;
		font-size: 28rpx;
	}
	.Reason .Choice {
		color: #999;
		font: 24rpx;
	}
	.Reason .Choice image{
		width: 12rpx;
		height: 20rpx;
		margin-left: 10rpx;
	}
	.descri{
		margin-top: 10rpx;
		font-size: 28rpx;
	}
	.descri input{
		font-size: 24rpx;
	}
	.upload{
		margin-top: 10rpx;
		font-size: 28rpx;
	}
	.Colo999{
		color: #999999;
		font-size: 24rpx;
	}
	.upload image{
		width: 170rpx;
		height: 170rpx;
		margin: 10rpx;
	}
	.Submission{
		width: 80%;
		margin: 180rpx auto 100rpx;
		background-color: #ff4300;
		color: #FFFFFF;
		font-size: 30rpx;
		text-align: center;
		line-height: 80rpx;
	}
	.shadow{
		width: 100%;
		height: 100vh;
		background-color: rgba(51,51,51,.4);
		position: fixed;
		top: 0;
		z-index: 99;
		}
	.ReasonList{
		position: relative;
		background-color: #F8F8F8;
		position: fixed;
		bottom: 0;
		width: 100%;
		color: #000000;
		height: 880rpx;
	}
	.ReasonList .Close{
		position: absolute;
		top: -10rpx;
		right: 10rpx;
		color: #666;
		font-size: 60rpx;
	}
	.ReasonList .Title{
		line-height: 100rpx;
		text-align: center;
		font-size: 36rpx;
		background-color: #FFFFFF;
	}
		.ReasonList .List{
			height: 640rpx;
			overflow-x: auto;
		}
	.ReasonList .List>view{
		border-bottom: 1rpx solid #EEEEEE;
		padding: 15rpx 30rpx;
		line-height: 60rpx;
		background-color: #FFFFFF;
		color: #444;
	}
	.ReasonList .Determine{
		width: 100%;
		position: fixed;
		bottom: 0;
		background-color: #ff4300;
		color: #FFFFFF;
		font-size: 30rpx;
		text-align: center;
		line-height: 80rpx;
		}
	.curr{
		background-color: #EEEEEE !important;
	}
		
</style>
